@import "../globals";
@import "compass/css3/shared";
@import "../jqueryui";

#stageContainer {
  height: 100%;
  overflow: hidden;
}

#stageControl {
  @include toolbar;
  overflow: hidden;

  div {
    top: 20%;
    bottom: 20%;
    height: 60%;
    position: relative;
    float: right;
  }

  button {
    float: left;
    display: table-cell;
    vertical-align: middle;
  }

  select, label {
    display: table-cell;
    vertical-align: middle;
    float: right;
  }

  select {
    width: 100px;
    margin-right: 10px;
    height: 20px;

  }
  label {
    margin-right: 5px;
    font-weight: bold;
  }

}

#stage {
  overflow: hidden;
  background-color: $stageBackgroundColor;
  @include box-shadow(inset 1px 1px 20px 10px rgba(0, 0, 0, 0.3));
  display: block;
}

#composition {
  position: relative;
  top: 50%;
  left: 50%;
  background-color: #000000;
  @include transform-origin(center center);

  div.sequence {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    cursor: move;
    background-color: #000000;

    video {
      max-width: 100%;
      width: 100%;
      height: 100%;
      max-height: 100%;
    }
    &:hover {
      // border: 1px solid $highlightColor;
    }

    &.active,
    &.active:hover {
      // border: 1px solid $selectedColor;
    }
  }

}

#stageCommands {
  @include toolbar;
  border-top: 1px solid $lineColor;

  div {
    margin: 0 auto;
    display: table;
    height: 100%;
    text-align: center;

    button {
      display: table-cell;
      vertical-align: middle;
    }
  }

}

